<template>
  <div>
    <div style="margin: 5px">
      <el-button size="mini" type="primary" style="margin-right: 5px" @click="recharge">充值</el-button>
      <el-popconfirm
        confirm-button-text='好的'
        cancel-button-text='不用了'
        icon="el-icon-info"
        icon-color="red"
        title="确认清空余额？"
        @confirm="clearBalance(masterAccount.id)"
      >
        <el-button slot="reference" size="mini" type="danger"  :loading="clearLoading">清空余额</el-button>
      </el-popconfirm>
    </div>
    <el-descriptions v-if="masterAccount"  title="" :column="4" border>
      <el-descriptions-item>
        <template slot="label">
          账户ID
        </template>
        {{ masterAccount.id }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          用户ID
        </template>
        {{ masterAccount.consumerId }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          类型
        </template>
        {{ masterAccount.accountName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          账户归属
        </template>
        {{ masterAccount.agentName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          账户余额
        </template>
         {{ masterAccount.accountAmountShow }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          账户余额锁定
        </template>
        {{ masterAccount.accountAmountLockedShow }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          虚拟余额
        </template>
        {{ masterAccount.virAccountAmountShow }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          虚拟余额锁定
        </template>
        {{ masterAccount.virAccountAmountLockedShow }}
      </el-descriptions-item>
    </el-descriptions>
    <el-table v-loading="loading" :data="subAccounts" style="margin-top: 20px">
      <el-table-column label="账号ID" align="center" prop="id"/>
      <el-table-column label="主账号ID" align="center" prop="masterId"/>
      <el-table-column label="类型" align="center" prop="accountName"/>
      <el-table-column label="账户归属" align="center" prop="agentName"/>
      <el-table-column label="账户余额" align="center" prop="accountAmountShow"/>
      <el-table-column label="账户余额锁定" align="center" prop="accountAmountLockedShow"/>
      <el-table-column label="虚拟余额" align="center" prop="virAccountAmountShow"/>
      <el-table-column label="虚拟余额锁定" align="center" prop="virAccountAmountLockedShow"/>
    </el-table>
  </div>
</template>

<script>
import {
  addBalance,
  clearBalance
} from '@/api/business/consumer'
export default {
  name: "accountDetail",
  data() {
    return {
      loading: false,
      clearLoading:false,
    }
  },
  props: {
    masterAccount: {
      type: Object,
      default: null
    },
    subAccounts: {
      type: Array,
      default: null
    },
    phoneNum: {
      type: String,
      default: null
    },
  },
  methods:{
   async clearBalance(id){
     try {
       this.clearLoading = true
       let res = await clearBalance(id)
       setTimeout(()=>{
         this.clearLoading = false
         this.$emit('myEvent')
       },1500)
     }catch (e) {
       this.clearLoading = false
     }
   },
     recharge(){
      this.$prompt('请输入金额', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^(([1-9]\d*)|\d)(\.\d{1,2})?$/,
        inputErrorMessage: '金额格式不正确'
      }).then(async ({ value }) => {
        try {
          let param = {
            masterId:this.masterAccount.id,
            amount:value,
            phoneNum:this.phoneNum
          }
          let res = await addBalance(param)
          this.$emit('myEvent')
          this.$message({
            type: 'success',
            message: '你充值的金额是: ' + value
          });
        }catch (e) {

        }

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
  }
}
</script>

<style scoped>

</style>
